<template>
  <div>
    <div v-if="meta.indexOf('TeacherLevelHandle') > -1" class="doumee_table_header">
      <el-button
        type="primary"
        @click="showAdd()"
      >新增</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="等级名称"
        prop="levelName"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="已关联教练数"
        prop="relevanceNum"
        min-width="110"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        prop="creator"
        label="创建人"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        min-width="160"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="排序码"
        prop="sortNum"
        min-width="80"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="操作"
        min-width="150"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-if="meta.indexOf('TeacherLevelHandle') > -1"
            v-preventReClick
            type="text"
            @click="showAdd(scope.row)"
          >编辑</el-button>
          <el-button
            v-if="meta.indexOf('TeacherLevelRemove') > -1"
            v-preventReClick
            type="text"
            @click="rowDel(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="total"
      :page="pagination.page"
      @SizeChange="pageSizeChange"
      @current-change="getList"
    />

    <el-drawer
      ref="showAddRef"
      title="新增教练等级"
      :visible.sync="isShowAdd"
      :before-close="closeDrawer"
      size="50%"
    >
      <el-form
        ref="addformRef"
        class="doumee-form"
        :rules="addRuler"
        :model="addForm"
        label-width="120px"
        label-suffix="："
        @submit.native.prevent
      >
        <el-form-item label="等级名称" prop="levelName">
          <el-input
            v-model="addForm.levelName"
            type="text"
            placeholder="请输入等级名称"
            class="w400"
          />
        </el-form-item>
        <el-form-item label="排序码">
          <el-input
            v-model="addForm.sortNum"
            type="text"
            onkeyup="value=value.replace(/[^\d^]/g,'')"
            class="w400"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="true"
            :loading="subLoading"
            type="primary"
            @click="onSubmit"
          >确认</el-button>
          <el-button
            @click="closeDrawer"
          >取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  teacherLevelListPost,
  editOrAddLevelPost,
  delLevelPost
} from '@/api'
export default {
  components: {
  },
  props: {
    meta: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      pagination: {
        page: 1,
        rows: 10
      },
      listLoading: false,

      isShowAdd: false,
      subLoading: false,
      addForm: {},
      addRuler: {
        levelName: [{ required: true, message: '请输入等级名称', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  methods: {
    showAdd(row) {
      this.addForm = row || {}
      this.isShowAdd = true
    },
    closeDrawer() {
      this.isShowAdd = false
    },
    onSubmit() {
      this.$refs['addformRef'].validate((valid) => {
        if (valid) {
          const param = { ...this.addForm }
          this.subLoading = true
          editOrAddLevelPost({ param }).then(res => {
            this.subLoading = false
            if (res.errorCode !== '000000') return
            this.$message.success('提交成功')
            this.getList()
            this.isShowAdd = false
          }, () => {
            this.subLoading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    rowDel(row) {
      this.$confirm('次操作将删除该教练等级', '提示', {
        type: 'warning'
      }).then(res => {
        delLevelPost({
          param: { id: row.id }
        }).then(res => {
          if (res.errorCode !== '000000') return
          this.$message.success('删除成功')
          this.getList()
        })
      })
    },
    pageSizeChange(val) {
      this.pagination.rows = val
      this.getList(1)
    },
    // 清空
    clear() {
      this.filters = {}
      this.getList(1)
    },
    getList(page) {
      const { filters, pagination } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      this.listLoading = true
      teacherLevelListPost({ pagination, param: {
        ...filters,
        venueId: sessionStorage.getItem('venueId')
      }}).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.vip-info {
  display: flex;
  justify-content: center;
  .name-phone {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    margin-left: 10px;
    flex: 1;
  }
}
</style>
